<template>
  <form class="form-translate" @submit="submit">
    <div class="form-group">
      <textarea class="form-control no-resize" v-model="text" rows="5" autofocus></textarea>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-4">
          <select class="form-control" v-model="langform">
            <option value="auto">自动检测</option>
            <option
              v-for="language in languages"
              :key="language.code"
              :value="language.code"
            >{{language.name}}</option>
          </select>
        </div>
        <div class="col-4">
          <select class="form-control" v-model="langto">
            <option
              v-for="language in languages"
              :key="language.code"
              :value="language.code"
            >{{language.name}}</option>
          </select>
        </div>
        <div class="col-4">
          <button class="btn btn-primary" style="width: 100%;">翻译</button>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import languages from '../assets/language.json'
export default {
  name: 'TranslateForm',
  data () {
    return {
      languages: [],
      langform: '',
      langto: '',
      text: ''
    }
  },
  methods: {
    submit (event) {
      event.preventDefault()
      this.$emit('submit', this.text, this.langform, this.langto)
    }
  },
  created () {
    this.languages = languages
    this.langform = 'auto'
    this.langto = 'en'
  }
}
</script>

<style scoped>
.no-resize {
  resize: none;
}
</style>
